<template>
  <view class="user_container app_container_page">
    <view class="">
      <view class="userMsg app_bgwith_wave">
        <open-data class="userAvatar" type="userAvatarUrl"></open-data>
        <view v-if="isLogin" class="userName"> {{ myInfo.name ? myInfo.name : '--' }} </view>
        <open-data v-else type="userNickName" class="userName"></open-data>
        <view class="userPhone"> {{ myInfo.mobile ? myInfo.mobile : '' }} </view>
        <van-button v-if="isLogin" type="default" class="userBtn" @click="handleJump('/myMsg/index')"> 修改信息</van-button>
      </view>
      <view class="label">
        <view class="labelItem" @click="handleJump('/children/list')">
          <view class="labelItemPic addChildren"></view>
          <view> 添加孩子 </view>
        </view>
        <view class="labelItem" @click="handleJump('/collection/index')">
          <view class="labelItemPic myCollection"></view>
          <view> 我的收藏 </view>
        </view>
        <view class="labelItem" @click="handleJump('/history/index')">
          <view class="labelItemPic courseBrowsingRecord"></view>
          <view> 课程浏览记录 </view>
        </view>
        <view class="labelItem" @click="handleJump('/callMe/index', false)">
          <view class="labelItemPic contactUs"></view>
          <view> 联系我们 </view>
        </view>
      </view>
    </view>
    <view class="exit">
      <van-button v-if="isLogin" type="default" class="userBtn" @click="toExit()"> 退出登录</van-button>
      <van-button v-else type="default" class="userBtn" @click="handleJump('/login/index', false)"> 登录</van-button>
    </view>
  </view>
</template>

<script>
import { myInfo, logout } from '@/api/user.js'
export default {
  data() {
    return {
      myInfo: {}
    }
  },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin
    }
  },
  methods: {
    async toExit() {
      try {
        const res = await this.$uniPromisify.showModal({
          content: '确定要退出吗？'
        })
        if (res.confirm) {
          const logoutRes = await logout()
          if (logoutRes.code === 200) {
            uni.clearStorageSync()
            this.$store.commit('SET_LOGOUTRESET')
            this.myInfo = {}
            uni.showToast({
              icon: 'none',
              title: '已退出登录'
            })
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleJump(url, needCheckLogin = true) {
      if (needCheckLogin && !this.$checkLogin()) return
      uni.navigateTo({
        url: `/pages${url}`
      })
    }
  },
  async onShow() {
    try {
      if (this.isLogin) {
        const res = await myInfo()
        if (res.code === 200) {
          this.myInfo = res.data
        }
      }
    } catch (error) {
      console.log(error)
    }
  }
}
</script>

<style lang="scss">
.user_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 112rpx;

  .userMsg {
    width: 100%;
    height: 639rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    color: #ffffff;
    margin-bottom: 94rpx;
    .userAvatar {
      width: 280rpx;
      height: 280rpx;
      border: 20rpx solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 30rpx;
      background: url('#{$BASEURL}/userPhoto.png');
      background-size: contain;
      background-repeat: no-repeat;
    }

    .userPhone {
      font-size: 30rpx;
      margin: 26rpx 0 38rpx 0;
    }
  }
  .userBtn {
    button {
      width: 160rpx;
      height: 60rpx;
      background: $theme-color;
      border-radius: 30px;
      padding: 0;
      border: 0;
    }
  }
  .label {
    width: 100%;
    height: 203rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    line-height: 80rpx;
    padding: 0 50rpx;

    .labelItem {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 202rpx;

      .labelItemPic {
        width: 140rpx;
        height: 140rpx;
        background: #d4ac40;
        box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.1);
        border-radius: 40rpx;
      }
      .addChildren {
        background: url('#{$BASEURL}/addChildren.png');
        background-size: contain;
      }
      .myCollection {
        background: url('#{$BASEURL}/myCollection.png');
        background-size: contain;
      }
      .courseBrowsingRecord {
        background: url('#{$BASEURL}/courseBrowsingRecord.png');
        background-size: contain;
      }
      .contactUs {
        background: url('#{$BASEURL}/contactUs.png');
        background-size: contain;
      }
      view {
        height: 24rpx;
        line-height: 24rpx;
      }
    }
  }

  .exit {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    margin: 123rpx 0 112rpx 0;
    button {
      width: 400rpx;
      height: 100rpx;
      border-radius: 50px;
    }
  }
}
</style>
